<template>
  <div class="box">
      <header class="header">
         <van-nav-bar
  title="详情"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
>
  <template #right>
    <van-icon name="more-o" size="22"/>
      <van-popover
  v-model="showPopover"
  theme="dark"
  trigger="click"
  :actions="actions"
  placement="bottom-end"
  @select="onSelect"
  :offset="offset"
>
  <template #reference>
    
  </template>
</van-popover>
  </template>
</van-nav-bar>

</header>
      <div class="content"> 
        <div class="my-detail-swipe">
  <van-swipe 
  class="my-swipe" 
  :show-indicators="false" 
  @change="changeSwiper"
  :initial-swipe="index - 1"
  >
  <van-swipe-item v-for="(item, index) in banners" :key="index" @click="previewImage">
    <van-image class="my-mmms" :src="item" />
    
  </van-swipe-item>

</van-swipe>
    <div class="mod1">
      ￥{{originprice}}
      <span>￥{{discount}}</span>
    </div>
    <div class="mod2">
      {{proname}}
    </div>
    <div class="my-indicators">{{ index }} / {{ banners.length }}</div>
    <!-- 视频 -->
      <div class="video-btn" @click="show = true">
    <van-icon size="20" color="#f66" name="play-circle-o" />
    {{ time | timeFilter }}
        </div>
        </div>
      </div>


      <div class="footer">
<van-goods-action :safe-area-inset-bottom="true">
  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24"  @click='onkfButton'/>
  <van-goods-action-icon icon="cart-o" text="购物车" @click='ontzgwcButton'/>
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" @click='onscButton'/>
  <van-goods-action-button type="warning" text="加入购物车" color="#be99ff" @click="ongwcButton" />
  <van-goods-action-button type="danger" text="立即购买" color="#7232dd" @click='ongoumaiButton'/>
</van-goods-action>
      </div>
      <van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
/>
    <!-- 弹出视频 -->
    <van-overlay :show="show" @click="show = false">
      <video class="my-video" ref="vdo" controls :src="vdoSrc"></video>
    </van-overlay>

    </div>
</template>
<script>
import Vue from 'vue';
import {getProDetailData  } from '@/utlis/detail.js';
import {cartadd,cartlist  } from '@/utlis/cart.js';

import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { Toast } from 'vant';
import { NavBar } from 'vant';
import { Popover } from 'vant';
import { ShareSheet } from 'vant'; 
import { Swipe, SwipeItem,Image as VanImage,Overlay,ImagePreview} from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(NavBar);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);
Vue.use(Overlay);
Vue.use(ImagePreview);

export default {
data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions:[
        { index: 0, text: "首页", icon: "wap-home-o" },
        { index: 1, text: "分类", icon: "bars" },
        { index: 2, text: "购物车", icon: "shopping-cart-o" },
        { index: 3, text: "个人中心", icon: "friends-o" },
        { index: 4, text: "分享", icon: "share-o" },
      ],
      offset:[13,10],
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      banners: [], // 轮播图的数据
      proname: "", // 产品名称
      originprice: 0, // 产品的原价
      category: "", // 产品的分类
      discount: 0, // 折扣
      index: 1, // 记录轮播图当前显示的是第几张图片
      time: 0, // 视频的时长

      vdoSrc:"https://jvod.300hu.com/vod/product/a4ef6fd8-9ec7-438b-b103-abcfe82a050d/e0a68f3f862a42a99ef253d38830e8b9.mp4",
      show: false, // 是否显示视频，是否播放视频
    }
    },
   methods: {
    ongoumaiButton() {
      Toast('不让买，滚');
    },
    ongwcButton() {
     
      // console.log(this.$store.state.userid);
      // cartlist({userid:this.$store.state.userid}).then(res=>{
      //   console.log(res);
      // })
      cartadd({userid:this.$store.state.userid,proid:this.$route.path.slice(8),num:1}).then(res=>{
         Toast(res.data.message);
        console.log(res);
      })
    },
        onscButton() {
      Toast('别点了，是摆设');
    },
    ontzgwcButton() {
      this.$router.push("/cart")
    },
    onkfButton() {
      _MEIQIA('showPanel');
    },
    onClickLeft(){
      this.$router.go(-1)
      
    },
    onClickRight(){
      console.log(1);
      this.showPopover= true
    
    },
     onSelect({ index }) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.$router.push("/kind");
          break;
        case 2:
          this.$router.push("/cart");
          break;
        case 3:
          this.$router.push("/user");
          break;
        case 4:
          console.log(1);
          this.showShare=true
           break;

    
  }
     },
     changeSwiper(index) {

      this.index = index + 1;
    },
    previewImage() {
      ImagePreview({
        images: this.banners,
        onChange: (index) => {
          this.index = index + 1;
        },
      });
    },
   },
     watch: {
    show(newVal) {
      if (newVal) {
        this.$refs.vdo.currentTime = 0; // 播放时长
        this.$refs.vdo.play();
      } else {
        this.$refs.vdo.pause();
      }
    },
  },
     filters: {
    timeFilter(val) {
      let t = Math.floor(val / 60);
      let s = Math.floor(val % 60);
      t = t < 10 ? "0" + t : t;
      s = s < 10 ? "0" + s : s;
      return t + "'" + s;
    },
  },
   mounted(){
    getProDetailData(this.$route.params.proid).then(res=>{
      const data = res.data.data;
      this.banners = data.banners[0].split(",");
      this.proname = data.proname;
      this.originprice = data.originprice;
      this.category = data.category;
      this.discount = data.discount;
    })
   }

}
</script>

<style lang="stylus" scoped>
.footer
  height 0.5rem
  background-color #efefef
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.my-swipe{
  margin-top 0.01rem
  height 300px
  .my-mmms{
  width 100%
  height 100%
}
}
.mod1{
  color: red
  font-size: 8vw
  font-weight 800
  margin-top 2vw
  margin-left 2vw
  span{
    font-size 4vw
    color: #ccc
    text-decoration:line-through
  }
}
.mod2{
  color: #262626;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  margin 2vw 2vw
}
.my-indicators {
  position: absolute;
  right: 0px;
  bottom: 90px;
  width: 50px;
  height: 20px;
  text-align: center;
  background-color: #cccc;
  border-radius: 10px 0 0 10px;
  line-height: 20px;
}
.my-detail-swipe {
  position: relative;
}
.video-btn {
  position: absolute;
  bottom: 90px;
  left: 50%;
  width: 80px;
  height: 30px;
  transform: translateX(-50%);
  background-color: rgba(255,255,255,0.3);
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-video {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

</style>

